<template>
	<view class="container">
		<cu-custom :isBack="true">
			<block slot="content">道路摄像机状态</block>
		</cu-custom>  
		 
		<view class="page-container">
			<view class="record-container">
				<view v-if="records.length != 0">
					<view class="record" v-for="(record, index) in records" :key="index">
						<view class="row">
							<view class="title">设备组名称</view>
							<view class="content">{{record.partnerName}}</view>
						</view>
						<view class="row">
							<view class="title">入口IP</view>
							<view class="content">{{record.enterCameraIp}}</view>
						</view>
						<view class="row">
							<view class="title">出口IP</view>
							<view class="content">{{record.outCameraIp}}</view>
						</view>
						<view class="row">
							<view class="title">状态</view>
							<view class="content">{{record.statusName}}</view>
						</view>
					</view>
				</view>
				<view v-else class="empty">暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		monitorPartners
	} from '@/api/index.js';
	export default {
		data() {  
			return {
				records: [],
			} 
		},
		onShow() {
			this.monitorPartnersApi();
		},
		methods: {
			monitorPartnersApi() {
				monitorPartners().then(res => {
					this.records = res.data;
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		.page-container {
			padding: 20rpx 30rpx 80rpx 30rpx;
			.record-container {
				padding: 40rpx 0;
				.empty {
					text-align: center;
					font-size: 32rpx;
					color: #999;
				}
				.record {
					width: 100%;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
					border-radius: 10rpx;
					margin-bottom: 30rpx;
					padding: 20rpx;
					.row {
						display: flex;
						height: 60rpx;
						line-height: 60rpx;
						.title {
							flex: 0 0 160rpx;
						}
						.content {
							flex: 1;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>
